<!-- 化妆品详情 -->
<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="8">
        <img :src="data.picture" />
      </el-col>
      <el-col :span="14">
        <el-row>
          <el-col>
            <span class="title select-none">{{data.title}}</span>
          </el-col>
          <el-col style="margin: 10px 0">
            <span class="price">{{data.price}}</span>
          </el-col>
          <el-col  style="margin: 30px 0">
          </el-col>
          <el-col style="position: relative">
            <div class="buttonGroup">
              <el-button size="mini" v-if="!focus" @click="FocusDetail()">关注</el-button>
              <el-button size="mini" v-if="focus" type="primary" @click="unFocus()">已关注</el-button>
              <el-button size="mini" type="primary" @click="jdLink()">京东外链</el-button>
            </div>
            <el-tabs v-model="active">
              <el-tab-pane label="商品分类/介绍" name="first" class="select-none"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col class="classify">
            <span v-for="item in data.classify" :key="item.key">{{item.key}}：{{item.value}}</span>
            <span>{{'好评度'}}：{{data.des ? data.des : '暂无评分'}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'cosmeticsDetail',
  data() {
    return {
      loading: false,
      userId: '',
      detailId: '',
      data: {},
      active: 'first',
      focus: false
    }
  },
  methods: {
    getDetail() {
      this.loading = true
      this.$get('/parameter/detail-item', {
        detail_id: this.detailId,
        user_id: this.userId
      }).then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.focus = res.data.focus ? res.data.focus : false
        }
      }).finally(this.loading = false)
    },
    jdLink() {
      window.open(this.data.link)
    },
    FocusDetail() {
      if (!this.userId) {
        window.location.href = 'login.html'
        return
      }
      this.loading = true
      this.$post('/recommend/detail-focus', {
        userId: this.userId,
        detailId: this.data.detail_id
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '关注成功'
          })
          this.focus = true
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      }).finally(this.loading = false)
    },
    unFocus() {
      this.loading = true
      this.$post('/recommend/detail-un-focus', {
        userId: this.userId,
        detailId: this.data.detail_id
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '取消关注成功'
          })
          this.focus = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.detailId = this.$route.query.detailId
    this.userId = this.$store.state.userInfo.id
    this.getDetail()
  }
}
</script>
<style lang='scss' scoped>
.container {
  margin: 30px auto;
  width: 80vw;
  height: 100%;
  font-family: 'PingFang SC';
  // background-color: aquamarine;
  img {
    height: 350px;
    box-shadow: 1px 2px 5px #666

  }
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
  }
  .price {
    float: right;
    font-size: 24px;
    color: $primary;
  }
  .buttonGroup {
    position: absolute;
    right: 0px;
    top: 5px;
    z-index: 2000
  }
  .classify {
    display: flex;
    flex-flow: column wrap;
    // grid-template-columns: repeat(4, 25%);
    // // grid-template-rows: repeat(4, 25%);
    // grid-row-gap: 20px;

    span {
      display: block;
      margin: 5px 0;
      font-size: 16px;
      font-weight: 300;
      color: #333;
    }
  }
}
</style>
